<template>
  <!-- 考试选择 -->
  <div class="filtrate_box">
    <!-- 考试选择navbar -->
    <div class="title_left" @click="onControlFiltratePage">
      {{ store.state.testKind.kind }}
      <svg class="zhuanhuan_icon" aria-hidden="true">
        <use xlink:href="#icon-line-exchangezhuanhuan"></use>
      </svg>
    </div>
    <slot></slot>
    <!-- 考试选择页面 -->
    <teleport to="#app">
      <FltratePage v-show="isFltratePage" />
    </teleport>
  </div>
</template>

<script>
import { ref } from "@vue/reactivity";

import FltratePage from "./filtratePage.vue";
import { provide } from "@vue/runtime-core";
import { useStore } from "vuex";
export default {
  name: "Filtrate",
  components: { FltratePage },
  setup() {
    const store = useStore();
    // 控制
    const isFltratePage = ref(false);
    const onControlFiltratePage = () => {
      isFltratePage.value = !isFltratePage.value;
    };
    provide("onControlFiltratePage", onControlFiltratePage);

    return {
      store,
      onControlFiltratePage,
      isFltratePage,
    };
  },
};
</script>

<style scoped lang="less">
.zhuanhuan_icon {
  width: 1.5rem;
  height: 1.5rem;
  margin: 0 0.5rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.filtrate_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 3rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  // background-color: #fbfbfb;
  // background-image: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.51yuansu.com%2Fpic3%2Fcover%2F01%2F23%2F24%2F592255b38f95b_610.jpg&refer=http%3A%2F%2Fbpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1659234423&t=99c458b6667f4704555fdae9797cd03a);
  // background-position: 0px -90px;
  // background-repeat: no-repeat;
  .title_left {
    display: flex;
    align-items: center;
    font-weight: bold;
    font-size: 1.2rem;
    color: #2a2929;
  }
}
.search_case_icon {
  width: 1.7rem;
  height: 1.7rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style>
